<template>
  <a-card>
    <a-row>
      <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
        <a-tree
          :tree-data="treeDetilData"
          :expanded-keys="expandedKeys"
          @expand="onExpand"
          @select="onSelect"
          :default-selected-keys="defaultSelectedKeys"
        >
        </a-tree>
      </a-col>
      <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
        <a-card :title="title">
          <a slot="extra" @click="addModal" style="margin-right: 10px"
            >新增节点</a
          >
          <a slot="extra" @click="updateModal">修改该节点 </a>

          <p>{{ describe }}</p>
          <!-- <p>该工序定额 {{ money }}</p> -->
        </a-card>
      </a-col>
    </a-row>

    <!-- 新增对话框弹窗 -->
    <a-modal v-model="addModalVisible" title="仓位管理新增节点" width="50%">
      <template slot="footer">
        <a-button @click="addParentInfo" :disabled="!addParentButton">
          添加仓库
        </a-button>
        <a-button
          @click="addChildrenInfo"
          type="primary"
          :disabled="addParentButton"
        >
          添加子节点
        </a-button>
      </template>

      <a-form-model
        ref="ruleForm"
        :model="addForm"
        :rules="modalRules"
        v-bind="modalLayout"
      >
        <a-row>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item label="选择父节点">
              <a-tree-select
                v-model="addForm.parentId"
                style="width: 100%"
                allow-clear
                tree-default-expand-all
                placeholder="添加仓库时，不需要选择"
                :tree-data="treeData"
                @change="disableParentButton"
              >
              </a-tree-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item ref="name" label="所属仓库">
              <a-select
                v-model="addForm.name"
                showSearch
                @change="DepotNameChange"
              >
                <a-select-option
                  v-for="item in WarehouseCodeList"
                  :key="item.id"
                  :value="item.id + '|' + item.depotNo + item.depotName"
                  >{{ item.depotNo }} {{ item.depotName }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row v-show="ShowBottom">
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item ref="quota" label="所属库号/仓位号">
              <a-input
                :min="0"
                v-model="addForm.quota"
                :step="0.001"
                style="width: 100%"
              />
            </a-form-model-item>
          </a-col>

          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item ref="describe" label="仓位描述" prop="describe">
              <a-textarea
                :auto-size="{ minRows: 4 }"
                allow-clear
                v-model="addForm.describe"
                :rows="4"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>

    <!-- 更新对话框弹窗 -->
    <a-modal v-model="updateModalVisible" title="仓位管理修改节点" width="50%">
      <template slot="footer">
        <a-button type="danger" @click="deleteModal"> 删除 </a-button>
        <a-button type="primary" @click="updateModalOk"> 提交 </a-button>
      </template>

      <a-form-model
        ref="ruleForm"
        :model="updateForm"
        :rules="modalRules"
        v-bind="modalLayout"
      >
        <a-row>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item ref="title" label="名称">
              <a-input v-model="updateForm.title" />
            </a-form-model-item>
          </a-col>

        </a-row>
        <a-row>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item ref="describe" label="仓位描述" prop="describe">
              <a-textarea
                :auto-size="{ minRows: 4 }"
                allow-clear
                v-model="updateForm.introduce"
                :rows="4"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
import { CangWeiXinXiHttp } from "../../services/modules/JiChuXinXiGuanLi/CangWeiXinXiGuanLi";
const $cwxxHttp = new CangWeiXinXiHttp();

export default {
  data() {
    return {
      // -------------------- 左侧工序树 --------------
      treeDetilData: [],
      // 详细信息，树选择
      selectdKey: "", //  被选择的key值，用于修改
      expandedKeys: [15], // 默认展开节点
      defaultSelectedKeys: [], // 默认选择节点

      // -------------------- 更新对话框中的表单 --------------
      // 更新对话框表单
      updateForm: {
        id: "",
        parentId: "",
        title: "",
        quota: "",
        introduce: "",
      },

      updateModalVisible: false, // 更新工序弹窗
      title: "仓位信息", // 默认卡片名称
      describe: "仓位描述", // 默认描述信息
      money: "", // 默认显示定额
      disableArray: [
        "工序",
        "出菇工序",
        "包装工序",
        "选菇岗位",
        "包装岗位",
        "包装其他",
        // "选菇",
      ], // 禁用的数组

      // -------------------- 新增对话框中的表单 --------------
      // 新增对话框表单
      addForm: {
        parentId: "",
        title: "",
        quota: "",
        describe: "",

        name: "", //仓库编码和名称
      },
      treeData: [], // 下拉按钮中的树
      addParentButton: true, // 用来控制子节点和父节点添加按钮的显示情况
      addModalVisible: false, // 添加工序弹窗
      ShowBottom: false, //控制所属仓位、库号是否显示
      WarehouseCodeList: [], //仓库编码

      // -------------------- 整体对话框布局和规则 --------------
      modalLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 15 },
      },
      // 对话框验证规则
      modalRules: {
        title: [
          { required: true, message: "工序名称不能为空", trigger: "blur" },
        ],
        quota: [
          { required: true, message: "工序定额不能为空", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    this.getAllNumberName2(); //获取仓库编码字典表
    this.GetBinInformationTree();
  },
  methods: {
    // 左侧工序树列表
    GetBinInformationTree() {
      this.treeDetilData = [];
      $cwxxHttp.GetBinInformationTree().then((res) => {
        console.log("树数据：：：：：：：：", res.result);
        this.treeDetilData = res.result;
        this.disableParent(this.treeDetilData);
      });
    },
    // 展开函数，设置了默认展开的时候所带的
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    // 树选择函数，节点数选择
    onSelect(selectedKeys, e) {
      console.log(e);
      this.selectdKey = selectedKeys[0];
      this.title = e.selectedNodes[0].data.props.dataRef.title;
      this.describe = e.selectedNodes[0].data.props.dataRef.describes;
      this.money = e.selectedNodes[0].data.props.dataRef.quota;

      this.updateForm.id = e.selectedNodes[0].data.props.dataRef.id;
      this.updateForm.parentId = e.selectedNodes[0].data.props.dataRef.parentId;
      this.updateForm.title = e.selectedNodes[0].data.props.dataRef.title;
      this.updateForm.quota = e.selectedNodes[0].data.props.dataRef.quota;
      this.updateForm.introduce =
        e.selectedNodes[0].data.props.dataRef.describes;
    },
    // -------------------- 新增对话框中的事件 --------------
    // 添加仓库
    addParentInfo() {
      let data = {
        inventoryOrganizationId: this.addForm.title,
        name: this.addForm.name,
        // introduce: this.addForm.introduce,
      };
      // console.log(data);
      $cwxxHttp.SaveGetBinInformationTree(data).then((res) => {
        if (res.code == 200) {
          this.addModalVisible = false;
          this.$message.success("添加成功");
          this.GetBinInformationTree();

          this.addForm = {};
          this.addParentButton = true; // 用来控制子节点和父节点添加按钮的显示情况
          this.addModalVisible = false; // 添加工序弹窗
          this.ShowBottom = false; //控制所属仓位、库号是否显示
        } else {
          this.$message.success("添加失败");
        }
      });
    },
    // 添加子节点
    addChildrenInfo() {
      let data = {
        parentId: this.addForm.parentId,
        inventoryOrganizationId: this.addForm.title,
        name: this.addForm.quota,
        describes: this.addForm.describe,
      };
      // console.log(data);
      $cwxxHttp.SaveGetBinInformationTree(data).then((res) => {
        if (res.code == 200) {
          this.addModalVisible = false;
          this.$message.success("添加成功");
          this.GetBinInformationTree();

          this.addForm = {};
          this.addParentButton = true; // 用来控制子节点和父节点添加按钮的显示情况
          this.addModalVisible = false; // 添加工序弹窗
          this.ShowBottom = false; //控制所属仓位、库号是否显示
        } else {
          this.$message.success("添加失败");
        }
      });
    },
    // 控制添加父子节点的显示情况
    disableParentButton() {
      console.log(this.addForm.parentId);
      if (typeof this.addForm.parentId == "undefined") {
        this.addParentButton = true;
        this.ShowBottom = false;
      } else {
        this.addParentButton = false;
        this.ShowBottom = true;
      }
    },

    // 下拉选择中的树
    getSelectTree() {
      $cwxxHttp.GetBinInformationTree().then((res) => {
        this.treeData = res.result;
      });
    },

    // 禁用节点
    disableParent(Tree) {
      Tree.forEach((item) => {
        if (this.disableArray.includes(item.name)) {
          item[`disabled`] = true;
          if (item.children) {
            this.disableParent(item.children);
          }
        } else {
          console.log(item.title);
          if (item.children) {
            this.disableParent(item.children);
          }
        }
      });
    },

    // 新增按钮事件
    addModal() {
      this.getSelectTree();
      this.addModalVisible = true;
    },
    // -------------------- 修改对话框中的事件 --------------
    // 修改弹窗按钮
    updateModal() {
      if (this.selectdKey == "") {
        this.$message.error("没有选择节点");
      } else {
        this.updateModalVisible = true;
      }
    },
    // 修改弹窗确定
    updateModalOk() {
      let data = {
        id: this.updateForm.id,
        describes: this.updateForm.introduce,
        name: this.updateForm.title,
        parentId: this.updateForm.parentId,
      };
      // console.log(data);
      $cwxxHttp.UpdateGetBinInformationTree(data).then((res) => {
        if (res.code == 200) {
          this.updateModalVisible = false;
          this.$message.success("修改成功");
          this.GetBinInformationTree();
          this.describe = this.updateForm.introduce;
          this.title = this.updateForm.title;
        } else {
          this.$message.success("修改失败");
        }
      });
    },
    // 修改弹窗删除
    deleteModal() {
      let queryPath = "?id=" + this.selectdKey;
      $cwxxHttp.DeleteGetBinInformationTree(queryPath).then((res) => {
        if (res.code == 200) {
          this.updateModalVisible = false;
          this.$message.success("删除成功");
          this.GetBinInformationTree();
        } else {
          this.$message.success("删除失败");
        }
      });
    },

    //返回所有的仓库编码、仓库名称
    getAllNumberName2() {
      $cwxxHttp.getAllNumberName2().then((res) => {
        for (let i = 0; i < res.result.length; i++) {
          let data = {
            depotNo: res.result[i].storcode,
            depotName: res.result[i].storname,
            id: res.result[i].pkStordoc,
          };
          this.WarehouseCodeList.push(data);
        }
        console.log("返回所有的仓库编码、仓库名称", this.WarehouseCodeList);
      });
    },

    // 选择仓库编码的change触发函数
    DepotNameChange(value, option) {
      console.log(value, option);
      const newValue = value.split("|");
      console.log(newValue);
      this.addForm.title = newValue[0];
      this.addForm.name = newValue[1];
    },
  },
};
</script>

<style></style>